<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="earth" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { WMS } from '../../src/og/layer/WMS.js';
        import { Vector } from '../../src/og/layer/Vector.js';
        import { Vec2 } from '../../src/og/math/Vec2.js';
        import { Entity } from '../../src/og/entity/Entity.js';

        let pointLayer = new Vector("points", {
            'clampToGround': true,
            'entities': [{
                'name': 'Blue Marker',
                'lonlat': [8.19, 46.73],
                'billboard': {
                    'src': 'marker.png',
                    'size': [29, 48],
                    'offset': [0, 24]
                }
            }, {
                'name': 'label',
                'lonlat': [8.25, 46.74],
                'label': {
                    'text': 'Touch me',
                    'size': [35],
                    'outlineColor': "rgba(0,0,0,.5)",
		    'outline': 0.3
                }
            }],
            'async': false
        });

        let pickingObject = null;
        let startClick = new Vec2(),
            startPos;

        pointLayer.events.on("mouseenter", function (e) {
            e.renderer.handler.canvas.style.cursor = "pointer";
        });

        pointLayer.events.on("mouseleave", function (e) {
            e.renderer.handler.canvas.style.cursor = "default";
        });

        pointLayer.events.on("ldown", function (e) {
            e.renderer.controls.mouseNavigation.deactivate();
            startClick.set(e.x, e.y);
            pickingObject = e.pickingObject;
            startPos = e.pickingObject.layer.planet.getPixelFromCartesian(pickingObject.getCartesian());
        });

        pointLayer.events.on("lup", function (e) {
            e.renderer.controls.mouseNavigation.activate();
            pickingObject = null;
        });

        let osm = new XYZ("OSM", {
            'specular': [0.0003, 0.00012, 0.00001],
            'shininess': 20,
            'diffuse': [0.89, 0.9, 0.83],
            'isBaseLayer': true,
            'url': "//b.tile.openstreetmap.org/{z}/{x}/{y}.png",
            'visibility': true,
            'attribution': 'Data @ OpenStreetMap contributors, ODbL'
        });

        let globe = new Globe({
            "target": "earth",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm, pointLayer]
        });

        globe.planet.renderer.events.on("mousemove", function (e) {
            if (pickingObject) {
                var d = new Vec2(e.x, e.y).sub(startClick);
                var endPos = startPos.add(d);
                var coords = this.getCartesianFromPixelTerrain(endPos);
                if (coords) {
                    pickingObject.setCartesian3v(coords);
                }
            }
        }, globe.planet);

        globe.planet.viewExtentArr([8.08, 46.72, 8.31, 46.75]);

        globe.renderer.events.on("lclick", function (e) {

            var ll = globe.planet.getLonLatFromPixelTerrain(e, true);

            pointLayer.add(new Entity({
                'name': 'New Marker',
                'lonlat': ll,
                'billboard': {
                    'src': 'marker.png',
                    'size': [29, 48],
                    'offset': [0, 24]
                }
            }));

        });

        pointLayer.events.on("rclick", function(e){
            e.pickingObject.remove();
        });

        window.p = pointLayer;

    </script>
</body>

</html>